<template>
  <div class="wraps">
    <!-- 左上 人员数 -->
    <div class="upperleft">
      <el-card class="box-card" shadow="hover" style="height: 43.2vh; position: relative;">
        <Rys></Rys>
      </el-card>
    </div>

    <!-- 右上 -->
    <div class="upperRight">
      <el-card class="box-card" shadow="hover" style="height: 43.2vh; position: relative;">
        <RylbOn></RylbOn>
      </el-card>
    </div>

    <!-- 左下 柱状图 -->
    <div class="lowerLeft">
      <el-card class="box-card" shadow="hover" style="height: 44.2vh; position: relative;">
      <RcLy></RcLy>
      </el-card>
    </div>

    <!-- 右下 -->
    <div class="lowerRight">
      <el-card class="box-card" shadow="hover" style="height: 44.2vh; position: relative;">
      <RulbBottom></RulbBottom>
      </el-card>
    </div>

  </div>
</template>

<script>
import Rys from "@/views/kjry/kjry/rcpt/rys";
import RcLy from '@/views/kjry/kjry/rcpt/rcly';
import RylbOn from '@/views/kjry/kjry/rcpt/rylbon.vue';
import RulbBottom from '@/views/kjry/kjry/rcpt/rulbBottom';
import ImagePreviewBase64 from "@/components/ImagePreviewBase64";

export default {
  name: "Rcpt",
  components: {ImagePreviewBase64, Rys ,RcLy, RylbOn ,RulbBottom},

  created() {

  },
  methods: {}
}
</script>

<style scoped>
.wraps {
  position: relative;
  background-size: cover;
  width: 100%;
  height: calc(100vh - 134px);
  border: 2px dashed #aaa;
  overflow: hidden; /* 防止 leftpart 超出 wrap */
}

/* 左上 */
.upperleft {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  bottom: 51%; /* 距离下面 60% */
  left: 0.5%; /* 距离左侧1% */
  width: 49%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5); !* 模块背景颜色 并透明显示 *!*/
}

/* 左下 */
.lowerLeft {
  position: absolute;
  top: 50%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 0.5%; /* 距离左侧1% */
  width: 49%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5);*/
}

/* 右上 */
.upperRight {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  bottom: 51%; /* 距离下面 60% */
  left: 50.5%; /* 距离左侧1% */
  width: 49%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5);*/
}

/* 右下 */
.lowerRight {
  position: absolute;
  top: 50%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 50.5%; /* 距离左侧1% */
  width: 49%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5);*/
}
</style>
